import { Avatar, NavBar, SearchBar, Swiper, Tabs } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import styles from './css/index.module.css'
import { BellOutline, UserCircleOutline } from 'antd-mobile-icons'

import commonimg1 from '../../assets/commonimg/image1.png'
import commonimg2 from '../../assets/commonimg/image2.png'
import commonimg3 from '../../assets/commonimg/5650298.png'
import lie1 from '../../assets/commonimg/lie1.png'
import lie2 from '../../assets/commonimg/lie2.png'
import lie3 from '../../assets/commonimg/lie3.png'
import lie4 from '../../assets/commonimg/lie4.png'
import lie5 from '../../assets/commonimg/lie5.png'
import request from '../../api/request'
import { useNavigate } from 'react-router-dom'
import dayjs from 'dayjs'
function Index() {
    const navigate = useNavigate()
    const left = (
        <Avatar style={{ borderRadius: '50%', width: '40px', height: '40px' }} src={localStorage.getItem('headPic') ? localStorage.getItem('headPic') : <UserCircleOutline />} />
    )
    const right = (
        <BellOutline style={{ fontSize: 24, color: '#999' }} />
    )

    const [img, setImg] = useState([])
    useEffect(() => {
        request.get('/share/v1/bannersShow').then((res) => {
            // console.log(res);
            setImg(res.data.result)
        })
    }, [])

    const [zixun, setZixun] = useState([])
    useEffect(() => {
        request.get('/share/knowledgeBase/v1/findDepartment').then((res) => {
            // console.log(res);
            setZixun(res.data.result)
        })
    }, [])

    const [jiankang, setJiankang] = useState([])
    useEffect(() => {
        request.get('/share/information/v1/findInformationPlateList').then((res) => {
            // console.log('jiankang', res);
            setJiankang(res.data.result)
        })
    }, [])

    const [jiankangliebiao, setJiankangliebiao] = useState([])
    const [plateId, setPlateId] = useState(1)
    const [page, setPage] = useState(1)
    const [count, setCount] = useState(10)
    useEffect(() => {
        request.get('/share/information/v1/findInformationList', {
            params: {
                plateId: plateId,
                page: page,
                count: count
            }
        }).then((res) => {
            console.log('jiankangliebiao', res);
            setJiankangliebiao(res.data.result)
        })
    }, [plateId, page, count])



    return (
        <div className={styles.box}>
            {/* 头部 */}
            <NavBar className={styles.heade} backIcon={false} left={left} right={right}>
                <SearchBar onFocus={() => navigate('/search')} placeholder='请输入症状/疾病' />
            </NavBar>
            {/* 轮播图 */}
            <Swiper autoplay loop style={{ width: '100vw', height: '160px' }}>
                {
                    img.map((item, index) => {
                        return <Swiper.Item key={index}><img style={{ width: '100%', height: '100%' }} src={item.imageUrl} alt="" /></Swiper.Item>
                    })
                }
            </Swiper>
            {/* 内容 */}
            <div className={styles.content}>
                <div className={styles.content1}>
                    <div className={styles.content1_top}>
                        <span>知识宝典</span>
                    </div>

                    <div className={styles.content1_main}>
                        <div className={styles.left} onClick={() => navigate('/symptoms')}>
                            <p>常见病症</p>
                            <img src={commonimg1} alt="" />
                        </div>
                        <div className={styles.right}>
                            <p>常用药品</p>
                            <img src={commonimg2} alt="" />
                        </div>
                    </div>
                </div>

                <div className={styles.content2}>
                    <div className={styles.content1_top}>
                        <span>问诊咨询</span>
                    </div>
                    <div className={styles.content2_main}>
                        {
                            zixun.map((item, index) => {
                                return <div key={index}>
                                    <img src={item.pic} alt="" />
                                    <p>{item.departmentName}</p>
                                </div>
                            })
                        }

                    </div>
                </div>

                <div className={styles.content3}>
                    <div className={styles.content1_top}>
                        <span>健康评测</span>
                    </div>
                    <div className={styles.content3_main}>
                        <img src={commonimg3} alt="" />
                    </div>
                </div>
                <div className={styles.content4}>
                    <div className={styles.content1_top}>
                        <span>健康咨询</span>
                    </div>
                    <div className={styles.content4_main}>
                        <Tabs onChange={setPlateId} activeLineMode={false} style={{ border: '#ccc solid 1px', boxSizing: 'border-box' }}>
                            {
                                jiankang.map((item) => {
                                    return <Tabs.Tab key={item.id} title={item.name}></Tabs.Tab>
                                })
                            }

                        </Tabs>
                    </div>
                </div>
                <div className={styles.content6}>
                    {
                        jiankangliebiao.map((item) => {
                            return <div key={item.id} onClick={()=>navigate(`/consultDetail/${item.id}`)} className={styles.content6_main}>
                                    <img src={item.thumbnail} alt="" />
                                    <div className={styles.content6_main_left} >
                                        <span style={{ fontSize: 15 }}>{item.title}</span>
                                        <span className={styles.content6_main_left_down}><span>{item.source}</span><span>{dayjs(item.releaseTime).format('YYYY-MM-DD')}</span></span>
                                    </div>
                                </div>
                        })
                    }

                </div>
                <div className={styles.content5}>
                    <div className={styles.content5_top}>早上起来第一杯水喝什么？</div>
                    <div className={styles.content5_img}>
                        <img src={lie1} alt="" />
                        <img src={lie2} alt="" />
                        <img src={lie3} alt="" />
                    </div>
                    <div className={styles.content5_di}><span>慎独白衣</span><span>23小时前</span></div>
                </div>
                <div className={styles.content6}>
                    <div className={styles.content6_main}>
                        <img src={lie4} alt="" />
                        <div className={styles.content6_main_left} >
                            <span style={{ fontSize: 15 }}>吃坚果等于“喝油”，减肥期间不能吃！吓唬谁呢？</span>
                            <span className={styles.content6_main_left_down}><span>钱多多营养师</span><span>1天前</span></span>
                        </div>
                    </div>
                </div>
                <div className={styles.content7}>
                    <div className={styles.content7_main}>
                        <span className={styles.content7_main_top}>哪种油对身体最有益？怎么吃最健康？</span>
                        <span className={styles.content7_main_down}><span>钱多多营养师</span><span>1天前</span></span>
                    </div>
                </div>
                <div className={styles.content6}>
                    <div className={styles.content6_main}>
                        <img src={lie5} alt="" />
                        <div className={styles.content6_main_left} >
                            <span style={{ fontSize: 15 }}>心烦、失眠、上火····4杯暖茶，补气清热更轻松！</span>
                            <span className={styles.content6_main_left_down}><span>北京卫视我是大医生</span><span>2018-12-10</span></span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Index
